<template>
  <div>
    <van-cell class="cell-asset" v-if="isTransverseLayout && items">
      <DigitalAsset :fee="fee" :items="items" />
    </van-cell>
    <van-cell-group>
      <van-cell>
        <div class="title">
          <van-tag v-if="presell_id" type="danger">{{presell_list.name}}</van-tag>
          {{ goods_detail.goods_name }}
        </div>
        <div class="panel-group">
          <div>
            <div
              class="price-box price-general"
              v-if="!seckill_id && !onlyRecord_id && !presell_id && !bargain_id"
            >
              <span class="price">{{goodsPrice | yuan}}</span>
              <van-tag plain type="danger" class="price-tag ml-10" v-if="priceTag">{{priceTag}}</van-tag>
              <small class="market">{{ marketPrice | yuan }}</small>
            </div>
            <div class="price-box price-group" v-else-if="group_id && onlyRecord_id">
              <span class="price">{{groupGoodsPrice | yuan}}</span>
              <van-tag plain type="danger" class="price-tag ml-10">拼团价</van-tag>
            </div>
            <div class="price-bargain" v-else-if="bargain_id">
              <span>最低砍至：{{bargain_list.lowest_money | yuan}}</span>
            </div>
            <div class="asset-fee" v-if="fee && !isTransverseLayout && items">
              <span>{{fee}}</span>手续费
            </div>
          </div>
          <div class="asset van-hairline--left" v-if="!isTransverseLayout && items">
            <DigitalAsset :items="items" />
          </div>
        </div>
      </van-cell>
      <van-cell class="express">
        <van-col span="10" class="text-secondary">运费：{{ goods_detail.shipping_fee }}</van-col>
        <van-col span="14" class="text-secondary">销量：{{ goods_detail.sales }}</van-col>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import DigitalAsset from "./DigitalAsset";
import { isEmpty } from "@/utils/util";
export default {
  data() {
    return {};
  },
  props: {
    goods_detail: Object,
    goodsPrice: [String, Number],
    marketPrice: [String, Number],
    groupGoodsPrice: [String, Number],
    presell_id: [Boolean, String, Number],
    group_id: [Boolean, String, Number],
    seckill_id: [Boolean, String, Number],
    onlyRecord_id: [Boolean, String, Number],
    bargain_id: [Boolean, String, Number],
    presell_list: [Object],
    bargain_list: [Object],
    priceTag: [Boolean, String],
    digitalAsset: [Object]
  },
  computed: {
    // 是否横向布局显示数字资产信息(目前秒杀、砍价、预售等活动显示横向显示布局)
    isTransverseLayout() {
      return this.seckill_id || this.presell_id || this.bargain_id
        ? true
        : false;
    },
    fee() {
      return this.digitalAsset.fee ? this.digitalAsset.fee + "%" : "";
    },
    items() {
      let arr = [];
      const eth = parseFloat(this.digitalAsset.eth);
      const eos = parseFloat(this.digitalAsset.eos);
      const price = parseFloat(this.goodsPrice);
      if (!isNaN(eth)) {
        let ethObj = {
          name: "ETH",
          icon: "v-icon-eth",
          money: price / eth
        };
        arr.push(ethObj);
      }
      if (!isNaN(eos)) {
        let eosObj = {
          name: "EOS",
          icon: "v-icon-eos",
          money: price / eos
        };
        arr.push(eosObj);
      }
      return !isEmpty(arr) ? arr : false;
    }
  },
  components: {
    DigitalAsset
  }
};
</script>

<style scoped>
.cell-asset {
  margin-bottom: 10px;
}

.title {
  font-size: 16px;
  height: 48px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: auto;
  color: #333;
}

.price-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.price {
  color: #ff454e;
  font-weight: 800;
  max-width: 100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.price-bargain {
  color: #ff454e;
  font-weight: 800;
}

.price-tag {
  font-weight: 800;
}

.market {
  font-weight: 400;
  color: #909399;
  font-size: 12px;
  margin-left: 10px;
  text-decoration: line-through;
  display: inline-block;
  max-width: 70px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.asset-fee {
  color: #909399;
  font-size: 12px;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.express {
  color: #909399;
  font-size: 12px;
  padding: 5px 15px;
}

.panel-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-group .asset {
  display: flex;
  padding-left: 15px;
}
</style>
